<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Electron Desktop</title>
</head>

<body>
  <h1>当前页面是否采用暗黑模式：<span id="isDarkMode"></span></h1>
  <p>
    <button onclick="preloadApi.setTheme('light')">设置浅色</button>
    <button onclick="preloadApi.setTheme('dark')">设置深色</button>
  </p>
  <style>
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    p {
      margin-bottom: 50px;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>
</body>

</html>